<!-- https://panels-template.webflow.io/demos/landing-3 -->

<div [ngClass]="['bg' + default, 'text' + defaultInv]" class="min-h-screen">
	<div class="p-6 space-y-8">
		<header
			class="container flex items-center justify-between h-16 px-4 mx-auto rounded"
			[ngClass]="['bg' + contrast]"
		>
			<a rel="noopener noreferrer" href="#" aria-label="Homepage">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="w-6 h-6"
					fill="currentColor"
					viewBox="0 0 32 32"
					[ngClass]="['text' + primary]"
				>
					<path
						d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"
					/>
					<path
						d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"
					/>
				</svg>
			</a>
			<div class="items-center hidden space-x-8 lg:flex">
				<div class="space-x-4">
					<a rel="noopener noreferrer" href="#">Link</a>
					<a rel="noopener noreferrer" href="#">Link</a>
					<a rel="noopener noreferrer" href="#">Link</a>
				</div>
				<button
					class="px-4 py-2 rounded-md"
					[ngClass]="['bg' + primary, 'text' + contrast]"
				>
					Sign up
				</button>
			</div>
			<button class="flex items-center justify-center p-2 lg:hidden">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					class="w-6 h-6"
					viewBox="0 0 24 24"
					[ngClass]="['text' + contrastInv]"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M4 6h16M4 12h16M4 18h16"
					/>
				</svg>
			</button>
		</header>
		<main>
			<div class="container mx-auto space-y-16">
				<section class="grid gap-6 text-center lg:grid-cols-2 xl:grid-cols-5">
					<div
						class="w-full p-6 rounded-md sm:p-16 xl:col-span-2"
						[ngClass]="['bg' + contrast]"
					>
						<span class="block mb-2" [ngClass]="['text' + primary]">
							Mamba design system
						</span>
						<h1 class="text-5xl font-extrabold" [ngClass]="['text' + contrastInv]">
							Build it with Mamba
						</h1>
						<p class="my-8">
							<span class="font-medium" [ngClass]="['text' + contrastInv]">
								Modular and versatile.
							</span>
							The ultimate design toolkit for savvy technology startups.
						</p>

						<form action="" class="self-stretch space-y-3">
							<div class="">
								<label class="text-sm sr-only" for="name">Your name</label>
								<input
									id="name"
									type="text"
									class="w-full rounded-md focus:ring"
									[ngClass]="['focus:ring' + primary, 'border' + neutral]"
									placeholder="Your name"
								/>
							</div>
							<div class="">
								<label class="text-sm sr-only" for="lastname">Email address</label>
								<input
									id="lastname"
									type="text"
									class="w-full rounded-md focus:ring"
									[ngClass]="['focus:ring' + primary, 'border' + neutral]"
									placeholder="Email address"
								/>
							</div>
							<button
								class="w-full py-2 font-semibold rounded"
								[ngClass]="['bg' + primary, 'text' + contrast]"
							>
								Join the waitlist
							</button>
						</form>
					</div>
					<img
						src="https://source.unsplash.com/random/480x360"
						alt=""
						class="object-cover w-full h-full rounded-md xl:col-span-3 bg-gray-500"
					/>
				</section>
				<section>
					<span
						class="block mb-2 text-xs font-medium tracking-widest uppercase lg:text-center"
						[ngClass]="['text' + primary]"
					>
						How it works
					</span>
					<h2
						class="text-5xl font-bold lg:text-center"
						[ngClass]="['text' + contrastInv]"
					>
						Building with Mamba is simple
					</h2>
					<div class="grid gap-6 my-16 lg:grid-cols-3">
						<div
							class="flex flex-col p-8 space-y-4 rounded-md"
							[ngClass]="['bg' + contrast]"
						>
							<div
								class="flex items-center justify-center flex-shrink-0 w-12 h-12 text-xl font-bold rounded-full"
								[ngClass]="['bg' + primary, 'text' + contrast]"
							>
								1
							</div>
							<p class="text-2xl font-semibold">
								<b>Nulla.</b>
								Nostrum, corrupti blanditiis. Illum, architecto?
							</p>
						</div>
						<div
							class="flex flex-col p-8 space-y-4 rounded-md"
							[ngClass]="['bg' + contrast]"
						>
							<div
								class="flex items-center justify-center flex-shrink-0 w-12 h-12 text-xl font-bold rounded-full"
								[ngClass]="['bg' + primary, 'text' + contrast]"
							>
								2
							</div>
							<p class="text-2xl font-semibold">
								<b>Accusantium.</b>
								Vitae saepe atque neque sunt eius dolor veniam alias debitis?
							</p>
						</div>
						<div
							class="flex flex-col p-8 space-y-4 rounded-md"
							[ngClass]="['bg' + contrast]"
						>
							<div
								class="flex items-center justify-center flex-shrink-0 w-12 h-12 text-xl font-bold rounded-full"
								[ngClass]="['bg' + primary, 'text' + contrast]"
							>
								3
							</div>
							<p class="text-2xl font-semibold">
								<b>Maxime.</b>
								Expedita temporibus culpa reprehenderit doloribus consectetur odio!
							</p>
						</div>
					</div>
				</section>
				<section class="grid gap-6 lg:grid-cols-2">
					<img
						src="https://source.unsplash.com/random/360x480"
						alt=""
						class="object-cover w-full rounded-md max-h-96 bg-gray-500"
					/>

					<div
						class="flex flex-col items-center w-full p-6 space-y-8 rounded-md lg:h-full lg:p-8"
						[ngClass]="['bg' + contrast]"
					>
						<img
							src="https://source.unsplash.com/random/100x100"
							alt=""
							class="object-cover w-20 h-20 rounded-full bg-gray-500"
						/>
						<blockquote class="max-w-lg text-lg italic font-medium text-center">
							"Et, dignissimos obcaecati. Recusandae praesentium doloribus vitae? Rem
							unde atque mollitia!"
						</blockquote>

						<div class="text-center" [ngClass]="['text' + plainInv]">
							<p>Leroy Jenkins</p>
							<p>CEO of Company Co.</p>
						</div>

						<div class="flex space-x-2">
							<button
								type="button"
								class="w-2 h-2 rounded-full"
								aria-label="Page 1"
								[ngClass]="['bg' + contrastInv]"
							></button>
							<button
								type="button"
								class="w-2 h-2 rounded-full"
								aria-label="Page 2"
								[ngClass]="['bg' + plain]"
							></button>
							<button
								type="button"
								class="w-2 h-2 rounded-full"
								aria-label="Page 3"
								[ngClass]="['bg' + plain]"
							></button>
							<button
								type="button"
								class="w-2 h-2 rounded-full"
								aria-label="Page 4"
								[ngClass]="['bg' + plain]"
							></button>
						</div>
					</div>
					<div
						class="p-8 space-y-8 rounded-md lg:col-span-full lg:py-12"
						[ngClass]="['bg' + contrast]"
					>
						<h2 class="text-5xl font-bold" [ngClass]="['text' + contrastInv]">
							Create with us
						</h2>
						<p class="" [ngClass]="['text' + plainInv]">
							Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt
							facilis quod accusantium beatae cum nam adipisci reiciendis omnis
							possimus error quo animi voluptas magni, at incidunt. Nulla ex at ullam
							corporis quidem adipisci vitae, perferendis dolorem libero minus atque
							tenetur enim pariatur cupiditate commodi in beatae, ipsa eligendi? Quis,
							saepe.
						</p>
					</div>
				</section>
				<section>
					<div class="grid gap-6 lg:grid-cols-3">
						<div class="overflow-hidden rounded lg:flex lg:col-span-3">
							<img
								src="https://source.unsplash.com/random/485x365"
								alt=""
								class="object-cover w-full h-auto max-h-96 bg-gray-500"
							/>
							<div
								class="p-6 space-y-6 lg:p-8 md:flex md:flex-col"
								[ngClass]="['bg' + contrast]"
							>
								<span
									class="self-start px-3 py-1 text-sm rounded-full"
									[ngClass]="['bg' + primary, 'text' + contrast]"
								>
									Business
								</span>
								<h2 class="text-3xl font-bold md:flex-1">
									Curating a workplace that inspires team movement
								</h2>
								<div>
									<p [ngClass]="['text' + plainInv]">November 30, 2020</p>
									<p [ngClass]="['text' + plainInv]">By Leroy Jenkins</p>
								</div>
							</div>
						</div>
						<div class="p-6 rounded lg:p-8 lg:py-12" [ngClass]="['bg' + contrast]">
							<h3 class="inline font-medium" [ngClass]="['text' + contrastInv]">
								Panel-based blocks.
							</h3>
							<p class="inline">
								Flexible panels that are perfect for building functional layouts.
							</p>
						</div>
						<div class="p-6 rounded lg:p-8 lg:py-12" [ngClass]="['bg' + contrast]">
							<h3 class="inline font-medium" [ngClass]="['text' + contrastInv]">
								Responsive design.
							</h3>
							<p class="inline">Panels look great no matter the device.</p>
						</div>
						<div class="p-6 rounded lg:p-8 lg:py-12" [ngClass]="['bg' + contrast]">
							<h3 class="inline font-medium" [ngClass]="['text' + contrastInv]">
								Premium support.
							</h3>
							<p class="inline">
								Join over 50 000 satisfied customers who use our templates.
							</p>
						</div>
					</div>
				</section>
				<section>
					<div
						class="container p-6 py-20 mx-auto rounded lg:px-8"
						[ngClass]="['bg' + contrast]"
					>
						<h2 class="text-5xl font-bold text-center">
							Our team is here to help you.
						</h2>
						<div class="flex justify-center p-4">
							<a class="" rel="noopener noreferrer" href="#">Meet our crew &gt;</a>
						</div>
						<img
							src="https://source.unsplash.com/random/360x240"
							alt=""
							class="object-cover w-full h-auto mt-8 rounded max-h-96 bg-gray-500"
						/>
					</div>
				</section>
			</div>
		</main>
		<footer>
			<div
				class="container flex justify-between p-6 mx-auto lg:p-8"
				[ngClass]="['bg' + contrast]"
			>
				<a class="font-bold" rel="noopener noreferrer" href="#">Mamba</a>
				<div class="flex space-x-2">
					<a
						class="flex items-center justify-center"
						[ngClass]="['text' + plainInv]"
						aria-label="Email"
						rel="noopener noreferrer"
						href="#"
					>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							class="w-5 h-5"
						>
							<path
								d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"
							/>
							<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
						</svg>
					</a>
					<a
						class="flex items-center justify-center"
						[ngClass]="['text' + plainInv]"
						aria-label="Twitter"
						rel="noopener noreferrer"
						href="#"
					>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 50 50"
							class="w-5 h-5"
							fill="currentColor"
						>
							<path
								d="M 50.0625 10.4375 C 48.214844 11.257813 46.234375 11.808594 44.152344 12.058594 C 46.277344 10.785156 47.910156 8.769531 48.675781 6.371094 C 46.691406 7.546875 44.484375 8.402344 42.144531 8.863281 C 40.269531 6.863281 37.597656 5.617188 34.640625 5.617188 C 28.960938 5.617188 24.355469 10.21875 24.355469 15.898438 C 24.355469 16.703125 24.449219 17.488281 24.625 18.242188 C 16.078125 17.8125 8.503906 13.71875 3.429688 7.496094 C 2.542969 9.019531 2.039063 10.785156 2.039063 12.667969 C 2.039063 16.234375 3.851563 19.382813 6.613281 21.230469 C 4.925781 21.175781 3.339844 20.710938 1.953125 19.941406 C 1.953125 19.984375 1.953125 20.027344 1.953125 20.070313 C 1.953125 25.054688 5.5 29.207031 10.199219 30.15625 C 9.339844 30.390625 8.429688 30.515625 7.492188 30.515625 C 6.828125 30.515625 6.183594 30.453125 5.554688 30.328125 C 6.867188 34.410156 10.664063 37.390625 15.160156 37.472656 C 11.644531 40.230469 7.210938 41.871094 2.390625 41.871094 C 1.558594 41.871094 0.742188 41.824219 -0.0585938 41.726563 C 4.488281 44.648438 9.894531 46.347656 15.703125 46.347656 C 34.617188 46.347656 44.960938 30.679688 44.960938 17.09375 C 44.960938 16.648438 44.949219 16.199219 44.933594 15.761719 C 46.941406 14.3125 48.683594 12.5 50.0625 10.4375 Z"
							></path>
						</svg>
					</a>
					<a
						class="flex items-center justify-center"
						[ngClass]="['text' + plainInv]"
						aria-label="Github"
						rel="noopener noreferrer"
						href="#"
					>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							class="w-6 h-6"
							fill="currentColor"
							viewBox="0 0 24 24"
						>
							<path
								d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"
							></path>
						</svg>
					</a>
				</div>
			</div>
		</footer>
	</div>
</div>
